

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head>
    <title>订单详情页面</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
</head>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<body>

<div style="margin-top: 30px;margin-left: 70px">
    <div style="margin-left: 10px;margin-top: 10px">
        <span id="span"><h3>当前订单状态: ${sessionScope.status==0 ? "待付款" :
                                sessionScope.status==1 ? "待发货" :
                                sessionScope.status==2 ? "已发货" :
                                sessionScope.status==3 ? "已完成" :
                                sessionScope.status==4 ? "已关闭" : "无效订单"}</h3></span>
        <button style="margin-left: 750px" id="btn" onclick="update('${sessionScope.status}','${sessionScope.order.id}')" class="pear-btn pear-btn-primary pear-btn-md statusBtn">
                ${sessionScope.status==0 ? "关闭订单" :
                  sessionScope.status==1 ? "订单发货" :
                  sessionScope.status==2 || sessionScope.status==3 ? "订单追踪" : "删除订单"}</button>
    </div>
</div>

<div style="margin-left: 70px;margin-top: 30px">
    <div style="margin-left: 10px;margin-top: 10px">
        <h3>基本信息:</h3>
    </div>
    <div style="width: 800px;height: 100px;margin-left: 50px;margin-top: 20px">
        <table class="layui-table" lay-size="sm" width="100">
            <colgroup>
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
            </colgroup>
            <thead>
            <tr align="center">
                <th>订单编号</th>
                <th>用户账号</th>
                <th>支付方式</th>
                <th>物流公司</th>
                <th>物流单号</th>
                <th>自动确认收货时间</th>
            </tr>
            </thead>
            <tbody>
            <tr align="center">
                <td>${sessionScope.order.orderSn}</td>
                <td>${sessionScope.order.memberId}</td>
                <td>支付宝</td>
                <td>${sessionScope.order.deliveryCompany==null ? '无' : sessionScope.order.deliveryCompany}</td>
                <td>${sessionScope.order.deliverySn==null ? '无' : sessionScope.order.deliverySn}</td>
                <td>${sessionScope.order.autoConfirmday==null ? '无' : sessionScope.order.autoConfirmday}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div style="margin-left: 70px">
    <div style="margin-left: 10px;margin-top: 10px">
        <h3>收货人信息:</h3>
    </div>
    <div style="width: 800px;height: 100px;margin-left: 50px;margin-top: 20px">
        <table class="layui-table" lay-size="sm" width="100">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th align="center">收货人</th>
                <th>手机号码</th>
                <th>邮政编码</th>
                <th>收货地址</th>
            </tr>
            </thead>
            <tbody>
            <tr align="center">
                <td>${sessionScope.order.receiverName}</td>
                <td>${sessionScope.order.receiverPhone}</td>
                <td>${sessionScope.order.receiverPostcode}</td>
                <td>${sessionScope.address}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div style="margin-left: 70px">
    <div style="margin-left: 10px;margin-top: 10px">
        <h3>商品信息:</h3>
    </div>
    <div style="width: 800px;height: 100px;margin-left: 50px;margin-top: 20px">
        <table class="layui-table" lay-size="sm" width="100">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr align="center">
                <th>商品图片</th>
                <th>商品名称</th>
                <th>属性</th>
                <th>小计</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${sessionScope.orderitems}" var="orderitem">
                <tr align="center">
                    <td><img src="${orderitem.productPic}" alt="" width="300" height="250"></td>
                    <td>${orderitem.productName}</td>
                    <td>${orderitem.productAttr}</td>
                    <td>${orderitem.productPrice}</td>
                </tr>
            </c:forEach>
            <c:if test="${sessionScope.orderitems.size()>1}">
                <tr>
                    <td></td>
                </tr>
            </c:if>
            </tbody>
        </table>
    </div>
</div>

<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
    function update(s,id) {
        let name = "";
        let status = 0;
            if (s==0){
                status=5;
                name="订单关闭";
            }else if (s==1){
                status=2
                name="订单发货";
            }
            $.getJSON('${pageContext.request.contextPath}/OrderUpdateStatusServlet',{status:status,id:id},function (data) {
                if (data) {
                    let g = $("#span");
                    if (s==0){
                        g.text("待发货");
                    }else if (s==1){
                        g.text("已发货");
                    }else if (s==2){
                        g.text("已完成");
                    }else if (s==3){
                        g.text("已关闭");
                    }else if (s==4){
                        g.text("无效订单");
                    }else if (s==5){
                        g.text("无效订单");
                    }
                    let jQuery2 = $("#btn");
                    if (s==0){
                        jQuery2.text("订单发货");
                    }else if (s==1){
                        jQuery2.text("订单追踪");
                    }
                    layer.msg(name+"成功", {
                        icon: 1,
                        time: 2000
                    });
                }else{
                    layer.msg(name+"失败", {
                        icon: 1,
                        time: 2000
                    });
                }
            })

    }
</script>
</body>
</html>
